<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="550" height="300"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrow. It draws a line from (fromX, fromY) to (toX, toY)
    // and adds an arrowhead at the (toX, toY) end.
    function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 8) {
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.stroke(); // Draw the line part

        // Draw the arrowhead
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // Parameters
    const l = 250;
    const d = 100;
    const rodThickness = 6;
    const centerX = 175;
    const centerY = 120;

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.font = 'italic 20px "Times New Roman"';
    ctx.textAlign = 'start';

    // Draw the rod AB as a filled rectangle
    const x_A = centerX - l / 2;
    const x_B = centerX + l / 2;
    ctx.fillRect(x_A, centerY - rodThickness / 2, l, rodThickness);
    
    // Draw labels A and B
    ctx.fillText('A', x_A - 25, centerY + 8);
    ctx.fillText('B', x_B + 10, centerY + 8);

    // Draw point Q with two concentric circles
    const x_Q = centerX;
    const y_Q = centerY - d;
    ctx.lineWidth = 1;
    // Outer circle
    ctx.beginPath();
    ctx.arc(x_Q, y_Q, 4, 0, 2 * Math.PI);
    ctx.stroke();
    // Inner circle (dot)
    ctx.beginPath();
    ctx.arc(x_Q, y_Q, 2, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.lineWidth = 1.5;
    ctx.fillText('Q', x_Q + 12, y_Q + 5);

    // Draw the vertical arrow for distance d
    drawArrow(ctx, x_Q, y_Q + 4, x_Q, centerY - rodThickness / 2);
    ctx.fillText('d', x_Q + 10, y_Q + d / 2 + 5);

    // --- Draw horizontal dimension lines for l and d ---
    const dimY = centerY + 60;
    const x_P = x_B + d;
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#333';

    // Draw vertical extension lines
    ctx.beginPath();
    ctx.moveTo(x_A, centerY + rodThickness / 2);
    ctx.lineTo(x_A, dimY);
    ctx.moveTo(x_B, centerY + rodThickness / 2);
    ctx.lineTo(x_B, dimY);
    ctx.moveTo(x_P, centerY);
    ctx.lineTo(x_P, dimY);
    ctx.stroke();

    // Draw dimension line for l
    ctx.beginPath();
    ctx.moveTo(x_A, dimY);
    ctx.lineTo(x_B, dimY);
    ctx.stroke();
    // Arrows for l
    drawArrow(ctx, x_A + 1, dimY, x_A, dimY);
    drawArrow(ctx, x_B - 1, dimY, x_B, dimY);
    
    // Draw dimension line for d (horizontal)
    ctx.beginPath();
    ctx.moveTo(x_B, dimY);
    ctx.lineTo(x_P, dimY);
    ctx.stroke();
    // Arrows for d
    drawArrow(ctx, x_B + 1, dimY, x_B, dimY);
    drawArrow(ctx, x_P - 1, dimY, x_P, dimY);

    // Draw the dashed line from B to P
    ctx.setLineDash([4, 4]);
    ctx.beginPath();
    ctx.moveTo(x_B, centerY);
    ctx.lineTo(x_P, centerY);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // Draw vertical tick at P
    ctx.beginPath();
    ctx.moveTo(x_P, centerY - 8);
    ctx.lineTo(x_P, centerY + 8);
    ctx.stroke();

    // Reset styles for labels
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    
    // Draw labels P, l, and d (horizontal)
    ctx.fillText('P', x_P + 12, centerY + 8);
    ctx.fillText('l', centerX, dimY - 10);
    ctx.fillText('d', x_B + d / 2, dimY - 10);

    // Draw the caption at the bottom
    ctx.font = '20px "KaiTi", "SimSun"';
    ctx.fillStyle = '#444';
    ctx.fillText('习题 7-8 图', canvas.width / 2, canvas.height - 20);

</script>
</body>
</html>